<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>麻将小游戏</title>
    <style>
        /* 全局样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: #f5f5f5;
            color: #333;
            overflow-x: hidden;
        }
        
        /* 游戏容器 */
        .game-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        
        /* 游戏标题 */
        .game-title {
            text-align: center;
            margin-bottom: 30px;
            color: #8B4513;
        }
        
        /* 游戏区域 */
        .game-area {
            display: grid;
            grid-template-columns: 1fr 3fr 1fr;
            gap: 20px;
            flex: 1;
        }
        
        /* 玩家信息区域 */
        .player-info {
            background-color: #fff;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        /* 主游戏区域 */
        .main-game {
            background-color: #2E8B57;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: relative;
        }
        
        /* 牌桌 */
        .table {
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 20px;
            min-height: 400px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
        }
        
        /* 麻将牌区域 */
        .tiles-area {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
            margin: 20px 0;
        }
        
        /* 玩家手牌区域 */
        .player-hand {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
            margin: 20px 0;
        }
        
        /* 麻将牌样式 */
        .tile {
            width: 60px;
            height: 80px;
            background-color: #fff;
            border: 2px solid #8B4513;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        
        /* 麻将牌悬停效果 */
        .tile:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        
        /* 选中的麻将牌 */
        .tile.selected {
            border-color: #ff0000;
            background-color: #fffacd;
        }
        
        /* 游戏控制按钮 */
        .game-controls {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }
        
        .btn {
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        
        .btn-primary {
            background-color: #8B4513;
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #6d3510;
        }
        
        .btn-secondary {
            background-color: #ccc;
            color: #333;
        }
        
        .btn-secondary:hover {
            background-color: #bbb;
        }
        
        /* 游戏状态显示 */
        .game-status {
            text-align: center;
            margin: 20px 0;
            font-size: 18px;
            color: white;
        }
        
        /* 得分区域 */
        .score-area {
            display: flex;
            justify-content: space-around;
            margin-top: 15px;
        }
        
        .score {
            background-color: rgba(255, 255, 255, 0.2);
            padding: 10px 20px;
            border-radius: 5px;
            color: white;
        }
        
        /* 提示信息 */
        .hint {
            background-color: rgba(255, 255, 255, 0.2);
            padding: 10px;
            border-radius: 5px;
            color: white;
            margin-top: 15px;
            text-align: center;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .game-area {
                grid-template-columns: 1fr;
                grid-template-rows: auto 1fr auto;
            }
            
            .tile {
                width: 50px;
                height: 70px;
                font-size: 20px;
            }
            
            .player-hand,
            .tiles-area {
                gap: 5px;
            }
        }
        
        /* 加载动画 */
        .loader {
            border: 4px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top: 4px solid white;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
            margin: 0 auto;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="game-container">
        <h1 class="game-title">麻将小游戏</h1>
        
        <div class="game-area">
            <!-- 左侧玩家信息 -->
            <div class="player-info">
                <h3>玩家信息</h3>
                <div class="score-area">
                    <div class="score">得分: <span id="player-score">0</span></div>
                </div>
                <div class="hint">点击开始按钮开始游戏</div>
            </div>
            
            <!-- 主游戏区域 -->
            <div class="main-game">
                <div class="game-status">
                    <span id="status-text">游戏未开始</span>
                </div>
                
                <div class="table">
                    <!-- 桌上的牌 -->
                    <div class="tiles-area" id="table-tiles">
                        <!-- 麻将牌将通过JavaScript动态生成 -->
                    </div>
                    
                    <!-- 玩家手牌 -->
                    <div class="player-hand" id="player-hand">
                        <!-- 玩家手牌将通过JavaScript动态生成 -->
                    </div>
                </div>
                
                <!-- 游戏控制按钮 -->
                <div class="game-controls">
                    <button id="start-btn" class="btn btn-primary">开始游戏</button>
                    <button id="restart-btn" class="btn btn-secondary" disabled>重新开始</button>
                    <button id="hint-btn" class="btn btn-secondary" disabled>提示</button>
                </div>
            </div>
            
            <!-- 右侧游戏信息 -->
            <div class="player-info">
                <h3>游戏信息</h3>
                <div class="score-area">
                    <div class="score">剩余牌数: <span id="remaining-tiles">0</span></div>
                </div>
                <div class="hint">游戏目标：匹配相同的麻将牌</div>
            </div>
        </div>
    </div>
    
    <script>
        // 麻将牌类型定义
        const TILE_TYPES = {
            // 万子牌
            'W1': '一万',
            'W2': '二万',
            'W3': '三万',
            'W4': '四万',
            'W5': '五万',
            'W6': '六万',
            'W7': '七万',
            'W8': '八万',
            'W9': '九万',
            // 条子牌
            'T1': '一条',
            'T2': '二条',
            'T3': '三条',
            'T4': '四条',
            'T5': '五条',
            'T6': '六条',
            'T7': '七条',
            'T8': '八条',
            'T9': '九条',
            // 筒子牌
            'B1': '一筒',
            'B2': '二筒',
            'B3': '三筒',
            'B4': '四筒',
            'B5': '五筒',
            'B6': '六筒',
            'B7': '七筒',
            'B8': '八筒',
            'B9': '九筒',
            // 风牌
            'F1': '东风',
            'F2': '南风',
            'F3': '西风',
            'F4': '北风',
            // 箭牌
            'J1': '红中',
            'J2': '发财',
            'J3': '白板'
        };
        
        // 游戏状态变量
        let gameState = {
            isGameStarted: false, // 游戏是否开始
            tiles: [], // 所有的牌
            playerHand: [], // 玩家手牌
            selectedTiles: [], // 选中的牌
            score: 0, // 玩家得分
            remainingTiles: 0 // 剩余牌数
        };
        
        // DOM元素引用
        const elements = {
            tableTiles: document.getElementById('table-tiles'),
            playerHand: document.getElementById('player-hand'),
            startBtn: document.getElementById('start-btn'),
            restartBtn: document.getElementById('restart-btn'),
            hintBtn: document.getElementById('hint-btn'),
            statusText: document.getElementById('status-text'),
            playerScore: document.getElementById('player-score'),
            remainingTiles: document.getElementById('remaining-tiles')
        };
        
        // 初始化事件监听
        function initEventListeners() {
            // 开始游戏按钮
            elements.startBtn.addEventListener('click', startGame);
            // 重新开始按钮
            elements.restartBtn.addEventListener('click', restartGame);
            // 提示按钮
            elements.hintBtn.addEventListener('click', showHint);
        }
        
        // 开始游戏
        function startGame() {
            // 重置游戏状态
            gameState = {
                isGameStarted: true,
                tiles: [],
                playerHand: [],
                selectedTiles: [],
                score: 0,
                remainingTiles: 0
            };
            
            // 创建麻将牌
            createTiles();
            // 洗牌
            shuffleTiles();
            // 发牌
            dealTiles();
            // 更新UI
            updateUI();
            // 启用/禁用按钮
            elements.startBtn.disabled = true;
            elements.restartBtn.disabled = false;
            elements.hintBtn.disabled = false;
            elements.statusText.textContent = '游戏进行中';
        }
        
        // 重新开始游戏
        function restartGame() {
            // 清空牌桌
            elements.tableTiles.innerHTML = '';
            elements.playerHand.innerHTML = '';
            // 调用开始游戏函数
            startGame();
        }
        
        // 创建麻将牌
        function createTiles() {
            // 为每种牌创建4张
            Object.keys(TILE_TYPES).forEach(type => {
                for (let i = 0; i < 4; i++) {
                    gameState.tiles.push({
                        id: `${type}-${i}`,
                        type: type,
                        value: TILE_TYPES[type],
                        isMatched: false
                    });
                }
            });
        }
        
        // 洗牌函数
        function shuffleTiles() {
            // Fisher-Yates 洗牌算法
            for (let i = gameState.tiles.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [gameState.tiles[i], gameState.tiles[j]] = [gameState.tiles[j], gameState.tiles[i]];
            }
        }
        
        // 发牌函数
        function dealTiles() {
            // 初始发给玩家13张牌
            gameState.playerHand = gameState.tiles.splice(0, 13);
            // 更新剩余牌数
            gameState.remainingTiles = gameState.tiles.length;
        }
        
        // 更新UI
        function updateUI() {
            // 渲染玩家手牌
            renderPlayerHand();
            // 渲染桌上的牌（如果有剩余牌）
            if (gameState.remainingTiles > 0) {
                renderTableTiles();
            }
            // 更新分数和剩余牌数
            elements.playerScore.textContent = gameState.score;
            elements.remainingTiles.textContent = gameState.remainingTiles;
            // 检查游戏是否结束
            checkGameEnd();
        }
        
        // 渲染玩家手牌
        function renderPlayerHand() {
            elements.playerHand.innerHTML = '';
            // 按照牌的类型排序
            gameState.playerHand.sort((a, b) => a.type.localeCompare(b.type));
            
            gameState.playerHand.forEach(tile => {
                if (!tile.isMatched) {
                    const tileElement = createTileElement(tile);
                    elements.playerHand.appendChild(tileElement);
                }
            });
        }
        
        // 渲染桌上的牌
        function renderTableTiles() {
            elements.tableTiles.innerHTML = '';
            
            // 只显示第一张牌（作为牌堆）
            const tileElement = createTileElement(gameState.tiles[0], true);
            elements.tableTiles.appendChild(tileElement);
        }
        
        // 创建麻将牌元素
        function createTileElement(tile, isDeck = false) {
            const div = document.createElement('div');
            div.className = 'tile';
            div.dataset.id = tile.id;
            div.dataset.type = tile.type;
            
            // 如果是牌堆，不显示具体内容
            if (isDeck) {
                div.textContent = '🀫'; // 牌背面符号
                div.addEventListener('click', drawTile);
            } else {
                div.textContent = tile.value;
                div.addEventListener('click', () => selectTile(tile));
            }
            
            return div;
        }
        
        // 抽牌函数
        function drawTile() {
            if (gameState.remainingTiles > 0) {
                // 从牌堆中抽取一张牌
                const drawnTile = gameState.tiles.shift();
                gameState.playerHand.push(drawnTile);
                gameState.remainingTiles--;
                // 更新UI
                updateUI();
            }
        }
        
        // 选择麻将牌
        function selectTile(tile) {
            // 如果已经匹配，则不能选择
            if (tile.isMatched) {
                return;
            }
            
            // 查找该牌在玩家手牌中的索引
            const tileIndex = gameState.playerHand.findIndex(t => t.id === tile.id);
            
            if (tileIndex !== -1) {
                // 切换选中状态
                const isCurrentlySelected = gameState.selectedTiles.some(t => t.id === tile.id);
                
                if (isCurrentlySelected) {
                    // 取消选中
                    gameState.selectedTiles = gameState.selectedTiles.filter(t => t.id !== tile.id);
                    elements.playerHand.children[tileIndex].classList.remove('selected');
                } else {
                    // 选中该牌
                    gameState.selectedTiles.push(tile);
                    elements.playerHand.children[tileIndex].classList.add('selected');
                    
                    // 如果选中了两张牌，检查是否匹配
                    if (gameState.selectedTiles.length === 2) {
                        checkMatch();
                    }
                }
            }
        }
        
        // 检查两张牌是否匹配
        function checkMatch() {
            const [tile1, tile2] = gameState.selectedTiles;
            
            // 检查牌类型是否相同
            if (tile1.type === tile2.type) {
                // 匹配成功
                gameState.score += 10;
                // 标记为已匹配
                tile1.isMatched = true;
                tile2.isMatched = true;
                // 更新状态文本
                elements.statusText.textContent = '匹配成功！+10分';
                // 短暂延迟后清除消息
                setTimeout(() => {
                    elements.statusText.textContent = '游戏进行中';
                }, 1500);
            } else {
                // 匹配失败
                elements.statusText.textContent = '匹配失败！';
                // 短暂延迟后清除消息
                setTimeout(() => {
                    elements.statusText.textContent = '游戏进行中';
                }, 1500);
            }
            
            // 清除选中状态
            gameState.selectedTiles.forEach(selectedTile => {
                const index = gameState.playerHand.findIndex(t => t.id === selectedTile.id);
                if (index !== -1) {
                    elements.playerHand.children[index].classList.remove('selected');
                }
            });
            
            // 清空选中的牌数组
            gameState.selectedTiles = [];
            
            // 更新UI
            updateUI();
        }
        
        // 显示提示
        function showHint() {
            // 查找可以匹配的牌对
            const handCopy = [...gameState.playerHand].filter(tile => !tile.isMatched);
            
            for (let i = 0; i < handCopy.length; i++) {
                for (let j = i + 1; j < handCopy.length; j++) {
                    if (handCopy[i].type === handCopy[j].type) {
                        // 找到匹配对，高亮显示
                        const firstIndex = gameState.playerHand.findIndex(t => t.id === handCopy[i].id);
                        const secondIndex = gameState.playerHand.findIndex(t => t.id === handCopy[j].id);
                        
                        if (firstIndex !== -1 && secondIndex !== -1) {
                            // 高亮显示
                            elements.playerHand.children[firstIndex].style.borderColor = '#ffd700';
                            elements.playerHand.children[secondIndex].style.borderColor = '#ffd700';
                            
                            // 3秒后恢复正常
                            setTimeout(() => {
                                elements.playerHand.children[firstIndex].style.borderColor = '';
                                elements.playerHand.children[secondIndex].style.borderColor = '';
                            }, 3000);
                            
                            return;
                        }
                    }
                }
            }
            
            // 如果没有找到匹配对，显示消息
            elements.statusText.textContent = '没有可匹配的牌！';
            setTimeout(() => {
                elements.statusText.textContent = '游戏进行中';
            }, 1500);
        }
        
        // 检查游戏是否结束
        function checkGameEnd() {
            // 检查所有牌是否都已匹配
            const allMatched = gameState.playerHand.every(tile => tile.isMatched);
            
            if (allMatched && gameState.remainingTiles === 0) {
                // 游戏结束
                elements.statusText.textContent = `游戏结束！您的得分：${gameState.score}`;
                elements.hintBtn.disabled = true;
            }
        }
        
        // 初始化游戏
        function init() {
            initEventListeners();
            elements.statusText.textContent = '欢迎来到麻将小游戏！';
        }
        
        // 页面加载完成后初始化游戏
        document.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>